<template>
    <!-- Preloader Start -->
    <div id="preloader">
        <div class="preloader--spinners">
            <div class="preloader--spinner preloader--spinner-1"></div>
            <div class="preloader--spinner preloader--spinner-2"></div>
        </div>
    </div>
    <!-- Preloader End -->

    <!-- Wrapper Start -->
    <div class="wrapper">
        <!-- Header Area Start -->
        <header id="header">
            <nav class="navbar">
                <div class="container">
                    <!-- Header Navbar Header Start -->
                    <div class="navbar-header">
                        <!-- Header Nav Toggle Button Start -->
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#headerNav" aria-controls="headerNav">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <!-- Header Nav Toggle Button End -->

                        <!-- Header Custom Button Start -->
                        <a href="login.html" class="header--custom-btn btn--default hover">LOGIN</a>
                        <!-- Header Custom Button End -->

                        <!-- Header Logo Start -->
                        <a href="index.html" class="navbar-brand">
                            <h1><img src="./img/logo1.png" style="height: 26px;width:26px;">&nbsp&nbsp<span>Smart Investment Promotion System &nbsp</span>数智招商系统</h1>
                        </a>
                        <!-- Header Logo End -->
                    </div>
                    <!-- Header Navbar Header End -->

                    <!-- Header Custom Button Start -->
                    <!-- <a href="/login.vue" class="header--custom-btn btn--default hover">登录</a> -->
                    <router-link to="/login" class="header--custom-btn btn--default hover">登录</router-link>

                    <!-- Header Custom Button End -->

                    <!-- Header Nav Start -->
                    <div id="headerNav" class="navbar-collapse collapse">
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="index.html">首页</a></li>
                            <!-- <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">HOSTING<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="shared-hosting.html">SHARED HOSTING</a></li>
                                    <li><a href="reseller-hosting.html">RESELLER HOSTING</a></li>
                                    <li><a href="vps-hosting.html">VPS HOSTING</a></li>
                                    <li><a href="dedicated-hosting.html">DEDICATED HOSTING</a></li>
                                </ul>
                            </li>  -->
                            <!-- <li><a href="domain.html">DOMAIN</a></li> 
                             <li class="dropdown active">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">PAGES<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="about.html">ABOUT</a></li>
                                    <li><a href="faq.html">FAQ</a></li>
                                    <li><a href="testimonial.html">TESTIMONIAL</a></li>
                                    <li class="active"><a href="login.html">LOGIN</a></li>
                                    <li><a href="affiliate.html">AFFILIATE</a></li>
                                    <li><a href="404.html">404</a></li>
                                </ul>
                            </li>  -->
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">BLOG<span
                                        class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <!-- <li><a href="">BLOG</a></li> -->
                                    <li><a href="blog-details-left.html">BLOG DETAILS LEFT</a></li>
                                    <!-- <li><a href="blog-details-right.html">BLOG DETAILS RIGHT</a></li> -->
                                </ul>
                            </li>
                            <!-- <li><a href="contact.html">注册</a></li> -->
                        </ul>
                    </div>
                    <!-- Header Nav End -->
                </div>
            </nav>
        </header>
        <!-- Header Area End -->

        <!-- Banner Area Start -->
        <div ref="banner" id="banner" class="bg--overlay carousel" data-bg-img="./img/bg.png">
            <!-- Banner Slider Start -->
            <div class="banner--slider BannerSlider" data-owl-autoplay="true">
                <!-- Banner Item Start -->
                <div class="banner--item" data-owl-id="sharedSlider">
                    <div class="vc-parent">
                        <div class="vc-child">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-8 col-md-offset-2">
                                        <!-- Banner Content Start -->
                                        <div class="banner--content">
                                            <h2>数智招商系统</h2>
                                            <h3>为区域经济助力&nbsp;&nbsp;&nbsp;&nbsp;为产业集聚加速</h3>

                                            <!-- <a href="#" class="btn--default hover">VIEW DETAILS</a> -->
                                        </div>
                                        <!-- Banner Item End -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Banner Item End -->

                <!-- Banner Item Start -->

                <!-- Banner Item End -->
            </div>
            <!-- Banner Slider End -->

            <!-- Banner Slider Nav Start -->
            <!-- <div class="banner--slider-nav">
                <div class="container">
                    <ul class="nav">
                        <li data-owl-target="sharedSlider"><i class="fa fa-server"></i></li>
                        <li data-owl-target="vpsSlider"><i class="fa fa-cloud"></i></li>
                        <li data-owl-target="dedicatedSlider"><i class="fa fa-hdd-o"></i></li>
                    </ul>
                </div>
            </div>  -->
            <!-- Banner Slider Nav End -->
        </div>
        <!-- Banner Area End -->

        <!-- Pricing Area Start -->

        <!-- Pricing Slider Item End -->

        <!-- Pricing Slider Item Start -->

        <!-- Pricing Slider Item End -->

        <!-- Pricing Slider Item Start -->

        <!-- Pricing Area End -->

        <!-- Domain Search Area Start -->

        <!-- Features Area End -->

        <!-- Counter Area Start -->






        <!-- Counter Area End -->

        <!-- Testimonial Area Start -->

        <!-- Blog Area End -->

        <!-- Footer Area Start -->
        <footer id="footer">
            <!-- Footer Widgets Start -->

            <!-- Footer Widgets End -->

            <!-- Footer Copyright Start -->
            <div class="footer--copyright">
                <div class="container">
                    <p>备案号:京ICP备18000994号-4 中关村军民科技协同创新孵化中心</p>
                </div>
            </div>
            <!-- Footer Copyright End -->
        </footer>
        <!-- Footer Area End -->

        <!-- Back To Top Button Start -->
        <div id="backToTop">
            <a href="#top"><i class="fa fa-angle-up"></i></a>
        </div>
        <!-- Back To Top Button End -->
    </div>
    <!-- Wrapper End -->
</template>


<script>
// import router from './router';

// Vue.config.productionTip = false;

// new Vue({
//     router,
//     render: h => h(App),
// }).$mount('#app');

export default {
    data() {
        return {
            imagePath: "./img/bg.png"
        }
    },
    mounted() {
       

       
        // 初始化轮播
        // $('.carousel').carousel();
        (function ($) {
            'use strict';

            /* -------------------------------
                Common Variables
            ------------------------------- */
            var $wn = $(window);

            /* -------------------------------
                RESPONSIVE PRICE DETAILS
            ------------------------------- */
            $.fn.resPriceDetails = function (params) {
                var _t = this;

                params = $.extend({
                    getData: null,
                    putData: null,
                    beforeData: '<strong>',
                    afterData: '</strong>'
                }, params);

                return this.find(params.putData).each(function () {
                    var $t = $(this),
                        text = _t.find(params.getData).eq($t.index()).text();

                    $t.append(params.beforeData + text + params.afterData);
                });
            };

            $(function () {
                /* -------------------------------
                    Main Scroll Class
                ------------------------------- */
                var $body = $('body');

                $wn.on('load scroll', function () {
                    if ($wn.scrollTop() > 1) {
                        $body.addClass('scrolled');
                    } else {
                        $body.removeClass('scrolled');
                    }
                });

                /* -------------------------------
                    Background Images
                ------------------------------- */
                var $bgImg = $('[data-bg-img]');

                $bgImg.each(function () {
                    var $t = $(this);

                    $t.css('background-image', 'url(' + $t.data('bg-img') + ')').removeAttr('data-bg-img').addClass('bg--img');
                });

                /* -------------------------------
                    Header Nav
                ------------------------------- */
                var $headerNav = $("#headerNav");

                $headerNav.hoverIntent({
                    selector: 'li.dropdown',
                    over: function () {
                        $(this).addClass('open');
                    },
                    out: function () {
                        $(this).removeClass('open');
                    },
                    timeout: 500,
                    interval: 300
                });

                /* -------------------------------
                    Owl Sliders
                ------------------------------- */
                var $bSlider = $('.BannerSlider'),
                    $bSNav = $('.banner--slider-nav'),
                    $bSNList = $bSNav.find('li'),
                    bSNActiveOnSlide = function (t) {
                        var $id = $(t.$owlItems[t.currentItem]).children().data('owl-id');

                        var $target = $bSNav.find('li[data-owl-target="' + $id + '"]');

                        $target.addClass('active').siblings().removeClass('active');

                        if ($bSlider.length) {
                            $bSlider.trigger('owl.goTo', $target.index());
                        }

                        if ($pSlider.length) {
                            $pSlider.trigger('owl.goTo', $target.index());
                        }
                    },
                    $pSlider = $('.PricingSlider');

                /* Banner Slider */
                if ($bSlider.length) {
                    $bSlider.owlCarousel({
                        slideSpeed: 700,
                        singleItem: true,
                        autoPlay: $bSlider.data('owl-autoplay'),
                        addClassActive: true,
                        pagination: false,
                        navigation: false,
                        afterInit: function () {
                            bSNActiveOnSlide(this);

                            // Add class to banner slider nav
                            $bSNav.addClass('has--bs');
                        },
                        afterMove: function () {
                            bSNActiveOnSlide(this);
                        }
                    });
                }

                /* Banner Slider Nav */
                $bSNList.on('click', function () {
                    var $t = $(this),
                        $tSlider = $('[data-owl-id="' + $t.data('owl-target') + '"]');

                    if ($tSlider.length) {
                        $t.addClass('active').siblings('li').removeClass('active');

                        $bSlider.trigger('owl.goTo', $tSlider.parent('.owl-item').index());
                        $pSlider.trigger('owl.goTo', $tSlider.parent('.owl-item').index());
                    }
                });

                /* Pricing Slider */
                if ($pSlider.length) {
                    $pSlider.owlCarousel({
                        slideSpeed: 700,
                        singleItem: true,
                        autoPlay: $pSlider.data('owl-autoplay'),
                        addClassActive: true,
                        pagination: false,
                        navigation: false,
                        afterInit: function () {
                            bSNActiveOnSlide(this);

                            // Add class to banner slider nav
                            $bSNav.addClass('has--ps');
                        },
                        afterMove: function () {
                            bSNActiveOnSlide(this);
                        }
                    });
                }

                /* Testimonial Slider */
                var $ttSlider = $('.TestimonialSlider');

                if ($ttSlider.length) {
                    var testimonialImg = function (obj) {
                        var $tUItemThumb = obj.$userItems,
                            $tPage = obj.paginationWrapper.children('.owl-page');

                        $tUItemThumb.each(function () {
                            var $t = $(this);

                            $tPage.eq($t.parent('.owl-item').index()).html('<img src="' + $t.data('thumb') + '" />');
                        });
                    };

                    $ttSlider.owlCarousel({
                        slideSpeed: 700,
                        singleItem: true,
                        autoPlay: $ttSlider.data('owl-autoplay'),
                        addClassActive: true,
                        pagination: true,
                        navigation: false,
                        afterInit: function () {
                            testimonialImg(this);

                            // Move controls above the slider
                            this.owlControls.prependTo(this.$elem);
                        },
                        afterUpdate: function () {
                            testimonialImg(this);
                        }
                    });
                }

                /* -------------------------------
                    VPS SLIDER
                ------------------------------- */
                var $headerVPS = $('.vps-pricing--slider-holder')
                    , vpsSlider = $('.VPSPricingSlider')
                    , vpsItemCPUel = $('.vps-pricing--cpu')
                    , vpsItemRAMel = $('.vps-pricing--ram')
                    , vpsItemSPACEel = $('.vps-pricing--space')
                    , vpsItemBANDWIDTHel = $('.vps-pricing--bandwidth')
                    , vpsItemPriceEl = $('.vps-pricing--total-price span')
                    , vpsActionBtn = $('.vps-pricing--action-btn .btn--default')
                    , inputCPUText = $('.InputCPUText')
                    , inputRamText = $('.InputRamText')
                    , inputSpaceText = $('.InputSpaceText')
                    , inputBandwidthText = $('.InputBandwidthText')
                    , inputPriceText = $('.InputPriceText');

                if (vpsSlider.length) {
                    // VPS slider variables
                    var $uiSliderHandle,
                        maxPlans = vpsSliderOpts.maxPlans - 1,
                        detfaultPlan = vpsSliderOpts.detfaultPlan - 1;

                    // Add slider pips
                    for (var i = 0; i < maxPlans; i++) {
                        $('<div class="pip"></div>')
                            .css('left', ((100 / maxPlans) * i) + '%')
                            .appendTo($headerVPS.children('.pips'));
                    }

                    // Initialize slider
                    vpsSlider.slider({
                        animate: "fast",
                        range: "min",
                        min: 0,
                        max: maxPlans,
                        value: detfaultPlan,
                        step: 1,
                        create: function () {
                            vpsItemCPUel.text(vpsSliderOpts.plans[detfaultPlan].cpuText);
                            vpsItemRAMel.text(vpsSliderOpts.plans[detfaultPlan].ramText);
                            vpsItemSPACEel.text(vpsSliderOpts.plans[detfaultPlan].spaceText);
                            vpsItemBANDWIDTHel.text(vpsSliderOpts.plans[detfaultPlan].brandwidthText);
                            vpsItemPriceEl.text(vpsSliderOpts.plans[detfaultPlan].priceText);
                            vpsActionBtn.attr('href', vpsSliderOpts.plans[detfaultPlan].url);

                            inputCPUText.val(vpsSliderOpts.plans[detfaultPlan].cpuText);
                            inputRamText.val(vpsSliderOpts.plans[detfaultPlan].ramText);
                            inputSpaceText.val(vpsSliderOpts.plans[detfaultPlan].spaceText);
                            inputBandwidthText.val(vpsSliderOpts.plans[detfaultPlan].brandwidthText);
                            inputPriceText.val(vpsSliderOpts.plans[detfaultPlan].priceText);

                            $uiSliderHandle = vpsSlider.children('.ui-slider-handle');
                            $('<i class="fa fa-circle"></i><em></em>').appendTo($uiSliderHandle);
                            $uiSliderHandle.children('em').html(vpsSliderOpts.plans[detfaultPlan].planName);
                        },
                        slide: function (event, ui) {
                            vpsItemCPUel.text(vpsSliderOpts.plans[ui.value].cpuText);
                            vpsItemRAMel.text(vpsSliderOpts.plans[ui.value].ramText);
                            vpsItemSPACEel.text(vpsSliderOpts.plans[ui.value].spaceText);
                            vpsItemBANDWIDTHel.text(vpsSliderOpts.plans[ui.value].brandwidthText);
                            vpsItemPriceEl.text(vpsSliderOpts.plans[ui.value].priceText);
                            vpsActionBtn.attr('href', vpsSliderOpts.plans[ui.value].url);

                            inputCPUText.val(vpsSliderOpts.plans[ui.value].cpuText);
                            inputRamText.val(vpsSliderOpts.plans[ui.value].ramText);
                            inputSpaceText.val(vpsSliderOpts.plans[ui.value].spaceText);
                            inputBandwidthText.val(vpsSliderOpts.plans[ui.value].brandwidthText);
                            inputPriceText.val(vpsSliderOpts.plans[ui.value].priceText);

                            $uiSliderHandle.children('em').html(vpsSliderOpts.plans[ui.value].planName);
                        }
                    });
                }


            });
        })(jQuery);


    }

}

</script>

<style scoped>
@import 'https://fonts.googleapis.com/css?family=Roboto%7COswald:300,400,700';
@import 'http://cdn.bootstrapmb.com/bootstrap/3.3.7/css/bootstrap.min.css';
@import './css/font-awesome.min.css';
@import './css/owl.carousel.min.css';
@import './css/style.css';
@import './css/responsive-style.css';
@import './css/theme-color-1.css';
@import './css/custom-style.css'
</style>
